<template>
  <!-- 工单表表单弹窗 -->
  <el-dialog
    v-model="visibleDialog"
    :title="props.title"
    width="80%"
    draggable
    @close="closeDialog"
    style="height: 800px"
  >
    <div class="echarts h-auto" style="height: 700px">
      <ECharts
        v-if="option"
        :option="option"
        :id="`Line` + props.id"
        ref="lineEChartsRef"
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "GENERATIONDAYPLAN",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    if (newVal) {
      // getFurnaceAgeData();
      console.log("props.data", props.data);
      seriesData.value.stoveNum1 = props.data.yDatas[0].stoveNum;
      seriesData.value.stoveNum2 = props.data.yDatas[1].stoveNum;
      seriesData.value.ydata1 = props.data.yDatas[0].ydata;
      seriesData.value.ydata2 = props.data.yDatas[1].ydata;
      seriesData.value.ydata3 = props.data.ydata3;
      seriesData.value.xdata = props.data.xdata;
      setOptions();
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {}
const loading = ref(false);

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});

// 获取当前日期yyyymmdd
function getCurrentDate() {
  const today = new Date();
  let year = today.getFullYear();
  let month = (today.getMonth() + 1).toString().padStart(2, "0");
  let day = today.getDate().toString().padStart(2, "0");
  return year.toString() + "-" + month + "-" + day;
}
//设备
const option = ref();
const showName = ref(true);
const seriesData = ref({
  workOrderData: [],
  processId: "1851835907965607938",
  processCode: "AL",
  processName: "AL",
  equipId: "1851835913715998721",
  equipCode: "AL01",
  equipName: "AL01",
  projectId: "1895308678735597569",
  projectCode: "BWM",
  projectName: "BWM",
  modelId: "1897128563618394113",
  modelCode: "788094",
  modelName: "FORD MPC",
  gageEquipId: null,
  gageEquipCode: null,
  gageEquipName: null,
  gageEquipMarkId: null,
  gageEquipMarkCode: "M1000140",
  gageEquipMarkName: "FORD MPC GL ME",
  paramId: "1878282517119397890",
  paramCode: "M01",
  paramName: "Diameter E",
  checkType: null,
  parameterStandards: 41.487,
  lowerLimitValue: 41.474,
  upperLimitValue: 41.5,
  controlRatioUp: 90.0,
  controlRatioDown: 85.0,
  controlUp: 41.4974,
  controlDown: 41.4779,
  groupCount: null,
  count: 50,
  xdata: [
    "05/01",
    "05/02",
    "05/03",
    "05/04",
    "05/05",
    "05/06",
    "05/07",
    "05/08",
    "05/09",
    "05/10",
    "05/11",
    "05/12",
    "05/13",
    "05/14",
    "05/15",
    "05/16",
    "05/17",
    "05/18",
    "05/19",
    "05/20",
    "05/21",
    "05/22",
    "05/23",
    "05/24",
    "05/25",
    "05/26",
    "05/27",
    "05/28",
    "05/29",
    "05/30",
    "05/31",
  ],
  xdataIndex: [
    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
    20, 21, 22, 23, 24,
  ],
  stoveNum1: "",
  stoveNum2: "",
  ydata1: [],
  ydata2: [],
  ydata3: [],
  yobjData: [],
});
// 折线图数据变更
watch(
  () => seriesData.value,
  (newVal) => {
    // setOptions();
  },
  {
    deep: true,
    immediate: true,
  }
);
function setOptions() {
  option.value = {
    animation: true,
    // animationDuration: 3 * 100,
    color: ["#4A95FF", "rgb(255,194,59)", "#ff1515"],
    tooltip: {
      trigger: "axis",
      // formatter: function (value: any) {
      //   return `${showName.value ? value[0].seriesName + "<br />" : ""}第${
      //     value[0].axisValueLabel
      //   }个节点&nbsp; ${seriesData.value.xdata[value[0].dataIndex]}<br />${
      //     value[0].marker
      //   }&nbsp; ${value[0].data}`;
      // },
      // textStyle: {
      //   align: "left",
      //   fontSize: 13,
      //   fontFamily: "DINAlt",
      //   lineHeight: 30,
      // },
      // axisPointer: {
      //   type: "cross",
      //   label: {
      //     backgroundColor: "#6a7985",
      //   },
      // },
    },
    legend: {
      data: [seriesData.value.stoveNum1, seriesData.value.stoveNum2, "控制线"],
      // selected:{'1炉':true,'2炉':true,}
    },
    grid: {
      left: "10",
      top: "50",
      right: 10,
      height: "auto",
      // minHeight: 400, // 单位为像素
      bottom: "5%",
      containLabel: true,
    },
    title: {
      // text: seriesData.value.paramName || "",
      textStyle: {
        align: "center",
        fontSize: 14,
        fontFamily: "DINLight",
      },
      top: "4%",
      left: "center",
    },
    xAxis: {
      boundaryGap: true,
      type: "category",
      data: seriesData.value.xdata || [],
      // axisLabel: {
      //   interval: "auto", // 坐标刻度之间的显示间隔，默认就可以了
      //   // rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
      //   fontSize: 12,
      //   fontFamily: "DINLight",
      // },
      // axisTick: {
      //   alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
      // },
    },
    yAxis: {
      type: "value", // 坐标轴类型:数值轴
      name: "炉龄", // 坐标轴名称
      boundaryGap: false,
      scale: true,
      // min: function (value: any) {
      //   return computedMin(value.min);
      // },
      // max: function (value: any) {
      //   return computedMax(value.max);
      // },
      position: "left", // 坐标轴位置:左侧
      // axisLabel: {
      //   interval: "auto", // 坐标刻度之间的显示间隔，默认就可以了
      //   // 调整数值改变倾斜的幅度（范围-90到90）
      // },
      // interval: "auto", // 坐标轴刻度间隔(当前被注释掉)
      offset: 0, // 坐标轴相对于默认位置的偏移:无偏移
      axisLine: {
        show: true, // 是否显示坐标轴线
        lineStyle: {
          color: "#6e7079", // 坐标轴线颜色:使用颜色数组的第一个颜色
        },
      },
      axisLabel: {
        fontSize: 12,
        fontFamily: "DINLight",
        // 自定义标签显示：当布尔类型图表，则显示 true or false
        formatter: function (value: number) {
          return value;
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true, // 是否显示分隔线
        lineStyle: {
          type: "dotted", // 分隔线类型:点线
        },
      },
    },
    dataZoom: [
      // {
      //   type: "slider", // 滑动条型数据区域缩放
      //   start: 0,
      //   end: 100,
      // },
      {
        type: "inside", // 内置型数据区域缩放
        start: 0,
        end: 100,
      },
    ],
    series: [
      {
        name: seriesData.value.stoveNum1,
        data: seriesData.value.ydata1,
        type: "line",
        itemStyle : { normal: {label : {show: true}}}
      },
      {
        name: seriesData.value.stoveNum2,
        data: seriesData.value.ydata2,
        type: "line",
        itemStyle : { normal: {label : {show: true}}},
      },
      {
        name: "控制线",
        data: seriesData.value.ydata3,
        type: "line",
        itemStyle : { normal: {label : {show: false}}},
      },
    ],
  };
}
// 计算y轴最小值
function computedMin(minValue: number) {
  if (seriesData.value.lowerLimitValue < minValue) {
    return seriesData.value.lowerLimitValue - 0.01;
  } else {
    return minValue;
  }
}

// 计算y轴最大值
function computedMax(maxValue: number) {
  if (seriesData.value.upperLimitValue < maxValue) {
    return maxValue;
  } else {
    return seriesData.value.upperLimitValue;
  }
}
</script>
<style lang="scss" scoped>
.el-dialog__body {
  height: 100% !important;
}
</style>
